<template>
	<view class="container">
		<swiper class="swiper" v-if="!is_play" @change="change" :autoplay="autoplay" :current='currenTo' :duration="duration" :circular="false" :interval="4000"
			:indicator-dots="false">
			<swiper-item v-for="(item, index) in imageList" :key="index" @tap.stop="playTap(item)">
				<view class="swiper-item">
					<view class="swiper-item-img">
						<image :src="item.thumb" mode="aspectFill" />
					</view>
				</view>
			</swiper-item>
		</swiper>
		      <view class="dots">
		        <block v-for="(item,index) in imageList.length" :key="item">
		          <view class="dot" :class="index == current ? ' active' : ''"></view>
		        </block>
		      </view>
		<video v-if="is_play" :src="videoUrl" autoplay="true" id="myVideo" style="width:750rpx;height:100%;" controls
			@pause="pauseTap" @error="videoErrorCallback"></video>
		<view class="app-in" @click="skip" v-if="(current==imageList.length - 1) && imageList.length > 0">开始使用</view>
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="skp" @click="skp" v-if="(current < imageList.length - 1) && imageList.length > 0">跳转</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="skp" @click="skp" v-if="(current < imageList.length - 1) && imageList.length > 0" style="top: 150rpx;">跳转</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoplay: false,
				duration: 500,
				details: [],
				screenHeight: '',
				showTime: '5',
				timer: '',
				imageList: [],
				loading: false,
				ads_time: 5,
				current: 0,
				is_play: false,
				videoUrl: "",
				currenTo:0,
			}
		},
		onLoad(options) {
			if(uni.getStorageSync('jinru')){
				uni.switchTab({
					url: "/pages/tabBar/index/index"
				})
			}else{
				// this.screenHeight = uni.getSystemInfoSync().screenHeight;
				this.queryAdverPlanByType()
			}
			
		},
		methods: {
			
			videoErrorCallback() {
			},
			playTap(item) {
			},
			pauseTap() {
				this.is_play = false;
				this.current = 0
			},
			skp(){
				this.currenTo = this.imageList.length - 1
			},
			change(e) {
				this.current = e.detail.current
				if(this.current==this.imageList.length - 1){
					this.autoplay = false
				}else{
					this.autoplay = true
				}
				if(this.current != this.imageList.length - 1){
					this.currenTo = this.current
				}
			},
			//获取广告
			queryAdverPlanByType() {

				let that = this;
				this.$api.post(global.apiUrls.post641e624160dd0, {
					operationadstype_id: 3
				}).then(res => {
					that.imageList = res.data.data;
					console.log(that.imageList.length,'<----that.imageList')
					if(that.imageList.length == 0){
						uni.switchTab({
							url: "/pages/tabBar/index/index"
						})
					}
				})
			},
			skip() {
				uni.setStorageSync('jinru',1);
				clearInterval(this.timer);
				uni.switchTab({
					url: "/pages/tabBar/index/index"
				})
			},
			jishi() {
				let that = this;
				let time = this.ads_time;
				let time_data = time * 1000
				that.timer = setInterval(function() {
					that.showTime = time--
					if (that.showTime == 0) {
						clearInterval(that.timer);
						that.first_app()
					}
				}, 1000);
			},
			first_app() {
				// var token = uni.getStorageSync('USER_TOKEN')
				// console.log(token, 1111)
				// if (token) {
					uni.switchTab({
						url: "/pages/tabBar/index/index"
					})
				// } else {
				// 	// #ifdef APP-PLUS
				// 	uni.reLaunch({
				// 		url: `/pages/index/chooseiDentity/chooseiDentity`,
				// 	});
				// 	// #endif
				// 	// #ifdef MP-WEIXIN
				// 	uni.reLaunch({
				// 		url: `/pages/denglu/logon/logon?type=0`,
				// 	});
				// 	// #endif
				// }
			},
		}
	}
</script>

<style lang="less">
	   .dots {
	        position: absolute;
	        bottom: 180upx;
	        left: 50%;
	        // 这里一定要注意兼容不然很可能踩坑
	        transform: translate(-50%, 0);
	        -webkit-transform: translate(-50%, 0);
	        z-index: 99;
	        display: flex;
	        flex-direction: row;
	        justify-content: center;
	
	        .dot {
	          width: 10rpx;
	          height: 10rpx;
	          border-radius: 50%;
	          transition: all .6s;
	          background: #ccc;
	          margin-right: 15rpx;
	          border-radius: 3px;
	        }
	
	        .active {
	          width: 24rpx;
	          height: 8rpx;
	          // background: $custom-main-color;
	        }
	      }
	.skp{
		position: fixed;
		top: 90rpx;
		right: 50rpx;
		font-size: 24rpx;
		border: 1px solid #999;
		background: #FFFFFF;
		padding: 8rpx 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	.container {
		width: 100%;
		height: 100vh;
		background-size: 100% auto;
		padding: 0;
		position: relative;
		overflow: hidden;
	}

	.app-in {
		// width: 350rpx;
		// height: 100rpx;
		
		transform: translateX(-50%);
		padding: 20upx 60upx;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		border-radius: 40upx;
		
		// text-align: center;
		// line-height: 100rpx;
		position: fixed;
		z-index: 9999;
		bottom: 77rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32rpx;
		// border-radius: 50rpx;
		// border: 1px solid #000000;
	}

	.swiper {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.swiper-item-img {
		width: 100%;
		height: 100%;
	}

	.swiper-item-img image {
		width: 100%;
		height: 100%;
	}

	.tiao {
		width: 130rpx;
		height: 66rpx;
		text-align: center;
		line-height: 66rpx;
		position: absolute;
		top: calc(var(--status-bar-height) + 88rpx);
		right: 40rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: #000;
		border-radius: 33rpx;
	}
</style>
